<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/operationsummary/Operations' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>患者统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
     
      <el-form-item>
        <div class="block" size="small"> <span class="demonstration">挂号时间:</span>
          <el-date-picker size="small" v-model="value2" type="datetimerange" :picker-options="pickerOptions"
            range-separator="-" start-placeholder="开始时间"  end-placeholder="结束时间" align="right">
          </el-date-picker>
        </div>
      </el-form-item>
      
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="Echarts">
      <div id="main" style="width: 900px;height:400px;"></div>
    </div>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中">
      <el-table-column prop="age" label="年龄段" width="400" show-overflow-tooltip align="center"> 
      </el-table-column>
      <el-table-column prop="count" label="人数" width="400" show-overflow-tooltip align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
      return{
        //时间段选择
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      formInline:{

      },
      listData:[
        {
          age:"总计",
          count:"",
        },
        {
          age:"0-10岁",
          count:"",
        },
        {
          age:"11-20岁",
          count:"",
        },
        {
          age:"21-30岁",
          count:"",
        },
        {
          age:"31-40岁",
          count:"",
        },
        {
          age:"41-50岁",
          count:"",
        },
        {
          age:"51-60岁",
          count:"",
        },
        {
          age:"61-70岁",
          count:"",
        },
        {
          age:"71-80岁",
          count:"",
        },
        {
          age:"80岁以上",
          count:"",
        },
      ],
      ages:{

      },

      outpatient:{
        createTimeFront: "",
        createTimeBack: "",
      },

      }
    },
    // 注册组件
    components: {

    },
    methods:{

      myEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          color:['#409EFF'],
          title: {
            text: '患者年龄分析'
          },
          tooltip: {},
          legend: {
            data:['人数']
          },
          xAxis: {
            data: ["0-10岁","11-20岁","21-30岁","31-40岁","41-50岁","51-60岁","61-70岁","71-80岁","80岁以上"]
          },
          yAxis: {},
          series: [{
            name: '人数',
            type: 'bar',
            data: [
            this.listData[1].count,
            this.listData[2].count,
            this.listData[3].count,
            this.listData[4].count,
            this.listData[5].count,
            this.listData[6].count,
            this.listData[7].count,
            this.listData[8].count,
            this.listData[9].count]
          }]
		    };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		  },

      getpatientage() {
        //发送请求,查询年龄段人数 
        axios.post("/api/outpatient/countAge", this.outpatient)
        .then((res) => {
          // console.log(res);
          this.ages = res.data.data;
          // console.log(this.ages);
          this.listData[0].count =this.ages.countPatient;
          this.listData[1].count =this.ages.age10;
          this.listData[2].count =this.ages.age20;
          this.listData[3].count =this.ages.age30;
          this.listData[4].count =this.ages.age40;
          this.listData[5].count =this.ages.age50;
          this.listData[6].count =this.ages.age60;
          this.listData[7].count =this.ages.age70;
          this.listData[8].count =this.ages.age80;
          this.listData[9].count =this.ages.age90;
          this.myEcharts();
        })
        .catch((err) =>{
            this.$message.error('请求错误,请联系我们的管理员~~~')
        });
      },
      search(){
        if(this.value2!==null&&this.value2!==""){
          this.outpatient.createTimeFront = this.value2[0];
          this.outpatient.createTimeBack = this.value2[1];
        }else{
          this.outpatient.createTimeFront=null;
          this.outpatient.createTimeBack=null;
        }
        //发送请求,查询年龄段人数 
        axios.post("/api/outpatient/countAge", this.outpatient)
        .then((res) => {
          // console.log(res);
          this.ages = res.data.data;
          this.listData[0].count =this.ages.countPatient;
          this.listData[1].count =this.ages.age10;
          this.listData[2].count =this.ages.age20;
          this.listData[3].count =this.ages.age30;
          this.listData[4].count =this.ages.age40;
          this.listData[5].count =this.ages.age50;
          this.listData[6].count =this.ages.age60;
          this.listData[7].count =this.ages.age70;
          this.listData[8].count =this.ages.age80;
          this.listData[9].count =this.ages.age90;
          this.myEcharts();
        })
        .catch((err) =>{
            this.$message.error('请求错误,请联系我们的管理员~~~')
        });
      },
    },
    mounted() {
  	
    },

    created(){
       //显示列表数据
    this.getpatientage();
    }
}
</script>